<template>
  <div>
    <!-- <div class="toptitle">角色列表</div> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="add()" size="mini" icon="el-icon-edit">新增配送信息</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      style="width: 100%"
      :header-cell-style="{background:'#ebecf0',color:'#606266'}"
    >
      <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
      <el-table-column prop="deliveryMoney" label="配送费" width="150" align="left"></el-table-column>

      <el-table-column prop="distance" label="最远启配距离" align="right"></el-table-column>
      <el-table-column prop="freeDistance" label="免费配送距离" align="right"></el-table-column>

      <el-table-column prop="deliveryType" label="配送计费方式" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.deliveryType===1">固定值</span>
          <span v-if="scope.row.deliveryType===2">按公里计费</span>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="配送服务开始时间" align="right"></el-table-column>

      <el-table-column prop="deliveryTime" label="配送服务结束时间" align="right"></el-table-column>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="edit(scope.row)" type="text">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="配送信息" :visible.sync="dialogVisible" width="37%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="最远启配距离" prop="distance">
          <el-input v-model="ruleForm.distance"></el-input>
        </el-form-item>
        <el-form-item label="免费配送距离" prop="freeDistance">
          <el-input v-model="ruleForm.freeDistance"></el-input>
        </el-form-item>
        <el-form-item label="配送费用" prop="deliveryMoney">
          <el-input v-model="ruleForm.deliveryMoney"></el-input>
        </el-form-item>

        <el-form-item label="配送服务时间" prop="deliveryTime">
          <el-time-select
            style="width:150px"
            v-model="value1"
            :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
            placeholder="开始时间"
          ></el-time-select>-
          <el-time-select
            style="width:150px"
            v-model="value2"
            :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
            placeholder="结束时间"
          ></el-time-select>
        </el-form-item>
        <el-form-item label="配送计费方式" prop="deliveryType">
          <el-radio v-model="ruleForm.deliveryType" label="1" style="margin-top:10px">固定值</el-radio>
          <el-radio v-model="ruleForm.deliveryType" label="2">按公里计费</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisibleone" width="30%">
      <span>确认删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleone = false" size="small">取 消</el-button>
        <el-button type="primary" @click="sure()" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  //   getmemberrule,
  //   addmemberrule,
  //   upmemberrule,
  //   usebutton,4
  addStoreDeliveryInfo,
  updateStoreDeliveryInfo,
  queryStoreDeliveryInfoOne
} from "@/api/distributioninfo";
import qs from "qs";
export default {
  data() {
    return {
      loading: true,
      value1: "",
      value2: "",
      tableData: [],
      label: "1",
      total: 0,
      formInline: {
        // gradelevelCode: "",
        gradelevelName: ""
      },
      data5: [],
      data3: [],
      data4: [],
      defaultProps: {
        children: "sub",
        label: "name"
      },
      objone: {},

      multipleSelection: [],
      radio: "",
      rolefenid: "",
      selected: {},
      ruleForm: {
        deliveryMoney: "",
        // gradelevelCode: "",
        deliveryType: "",
        // status: "",
        value1: "",
        value2: "",
        freeDistance: "",
        distance: ""
      },
      orgList: {},
      uuid: "",
      roleid: "",
      dialogVisibleone: false,
      dialogVisibletwo: false,
      dialogVisible: false,
      ruledata: [],

      rules: {
        deliveryMoney: [
          { required: true, message: "请输入最远启配距离", trigger: "blur" }
        ],
        deliveryType: [
          { required: true, message: "请选择配送计费方式", trigger: "blur" }
        ],
        // deliveryTime: [
        //   { required: true, message: "请输入配送服务时间", trigger: "blur" }
        // ],
        freeDistance: [
          { required: true, message: "请输入免费配送距离", trigger: "blur" }
        ],
        distance: [
          { required: true, message: "请输入最远启配距离", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this._queryStoreDeliveryInfoOne();
    this.logininfo = localStorage.getItem("logininfo");

    this.orgList = JSON.parse(this.logininfo).orgList;
  },
  methods: {
    add() {
      this.ruleForm.deliveryMoney = "";

      this.ruleForm.deliveryType = "";
      this.ruleForm.deliveryTime = "";
      this.ruleForm.freeDistance = "";
      this.ruleForm.distance = "";
      this.ruleForm.startTime = "";
      this.ruleForm.deliveryTime = "";
      this.dialogVisible = !this.dialogVisible;
      this.editflag = false;
    },
    edit(v) {
      console.log(v, "pp");
      this.ruleForm.deliveryMoney = v.deliveryMoney;

      this.ruleForm.deliveryType = String(v.deliveryType);
      //   this.ruleForm.deliveryTime = v.deliveryTime;
      this.ruleForm.freeDistance = v.freeDistance;
      this.ruleForm.distance = v.distance;
      this.ruleForm.startTime = v.value1;
      this.ruleForm.deliveryTime = v.value2;
      this.dialogVisible = !this.dialogVisible;
      this.editflag = true;
      this.uuid = v.uuid;
    },
    confirmEdit(v) {
      console.log(v, "ff");
      if (
        this.ruleForm.deliveryMoney == "" ||
        this.ruleForm.deliveryMoney == null
      ) {
        this.$message.error("请输入最远启配距离");
        return;
      }
      if (
        this.ruleForm.deliveryType == "" ||
        this.ruleForm.deliveryType == ""
      ) {
        this.$message.error("请选择配送计费方式");
        return;
      }

      if (
        this.ruleForm.freeDistance == "" ||
        this.ruleForm.freeDistance == null
      ) {
        this.$message.error("请输入免费配送距离");
        return;
      }

      if (this.ruleForm.distance == "" || this.ruleForm.distance == null) {
        this.$message.error("请输入最远启配距离");
        return;
      }
      if (this.editflag) {
        var userId = localStorage.getItem("userId");
        let data = {
          uuid: this.uuid,
          deliveryMoney: this.ruleForm.deliveryMoney,
          orgSeq: this.orgList[0].orgSeq,
          startTime: this.ruleForm.value1,
          deliveryTime: this.ruleForm.value2,
          deliveryType: this.ruleForm.deliveryType,
          freeDistance: this.ruleForm.freeDistance,
          distance: this.ruleForm.distance
        };
        updateStoreDeliveryInfo(data).then(res => {
          this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success"
          });
          this._queryStoreDeliveryInfoOne();
        });
      } else {
        let data = {
          deliveryMoney: this.ruleForm.deliveryMoney,
          orgSeq: this.orgList[0].orgSeq,
          startTime: this.value1,
          deliveryTime: this.value2,
          deliveryType: this.ruleForm.deliveryType,
          freeDistance: this.ruleForm.freeDistance,
          distance: this.ruleForm.distance
        };
        addStoreDeliveryInfo(data).then(res => {
          this.dialogVisible = false;
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success"
          });
          this._queryStoreDeliveryInfoOne();
        });
      }
      //var u1 = "u1";
    },

    _queryStoreDeliveryInfoOne() {
      this.logininfo = localStorage.getItem("logininfo");

      this.orgList = JSON.parse(this.logininfo).orgList;

      let data = {
        orgSeq: this.orgList[0].orgSeq
      };
      queryStoreDeliveryInfoOne(data).then(res => {
        this.loading = false;
        this.tableData.push(res.result);
      });
    }
  }
};
</script>
<style  lang="less" scoped>
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttable {
  width: 500px;
  float: left;
}

.limttree {
  display: inline-block;

  border-top: 48px solid rgb(238, 241, 246);
  width: 206px;
  margin-left: 150px;
}

.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttreecontain {
  height: 260px;
  width: 200px;
  overflow: scroll;
  border: 1px solid #ccc;
}
.demo-form-inline {
  //   border: 1px solid #ebeef5;
  padding: 20px 10px 3px 30px;
  margin-bottom: 25px;
}
</style>